<template>
  <view class="page">
    <!-- 导航栏 -->
    <tui-navigation-bar title="订单详情"></tui-navigation-bar>

    <!-- <my-row title="是否退款" :value="orderDetail.refund | refundType"></my-row> -->

    <!-- 会员充值 -->
    <section v-if="showType('mrecharge')" class="card">
      <view class="box">
        <my-row title="订单类型" :value="$format(orderDetail, 'ordertype_bz', '')"></my-row>
        <my-row title="商家名称" :value="$format(orderDetail, 'bname', '')"></my-row>
        <my-row title="订单编号" :value="$format(orderDetail, 'ordernum', '')"></my-row>
        <my-row title="操作终端" :value="$format(orderDetail, 'terminal', '')"></my-row>
        <my-row title="房台号" :value="$format(orderDetail, 'roomid', '')"></my-row>
        <my-row title="充值金额">
          <view slot="value" class="value text-price">{{ $format(orderDetail, 'rechargemoney', '') }}</view>
        </my-row>
        <my-row title="订单时间" :value="$format(orderDetail, 'paytime', '')"></my-row>
        <my-row title="备注">
          <view slot="value" class="value width-50 text-align-right">{{ $format(orderDetail, 'remark', '') }}</view>
        </my-row>

        <view class="section-title">付款明细</view>
        <view class="box">
          <block v-for="(payItem, index) in orderDetail.paydetail" :key="index">
            <my-row :title="$format(payItem, 'title', '')">
              <view slot="value" class="value text-price">{{ $format(payItem, 'value', '') }}</view>
            </my-row>
          </block>
        </view>
      </view>
    </section>

    <!-- 会员消费 -->
    <section v-else-if="showType('mpay')" class="card">
      <view class="box">
        <my-row title="订单类型" :value="$format(orderDetail, 'ordertype_bz', '')"></my-row>
        <my-row title="商家名称" :value="$format(orderDetail, 'bname', '')"></my-row>
        <my-row title="订单编号" :value="$format(orderDetail, 'orderNum', '')"></my-row>
        <my-row title="操作终端" :value="$format(orderDetail, 'terminal', '')"></my-row>
        <my-row title="房台号" :value="$format(orderDetail, 'roomid', '')"></my-row>

        <my-row title="消费金额">
          <view slot="value" class="value text-price">{{ $format(orderDetail, 'money', '') }}</view>
        </my-row>
        <my-row title="消费代金卡">
          <view slot="value" class="value text-price">{{ $format(orderDetail, 'DaijinCard', '') }}</view>
        </my-row>
        <my-row title="订单时间" :value="$format(orderDetail, 'paytime', '')"></my-row>
        <my-row title="备注">
          <view slot="value" class="value width-50 text-align-right">{{ $format(orderDetail, 'remark', '') }}</view>
        </my-row>

        <view class="section-title">付款明细</view>
        <view class="box">
          <block v-for="(payItem, index) in orderDetail.paydetail" :key="index">
            <my-row :title="$format(payItem, 'title', '')">
              <view slot="value" class="value text-price">{{ $format(payItem, 'value', '') }}</view>
            </my-row>
          </block>
        </view>
      </view>
    </section>

    <!-- 扫码点单 -->
    <section v-else-if="showType('scanorder')" class="card">
      <view class="box">
        <my-row title="订单类型" :value="$format(orderDetail, 'ordertype_bz', '')"></my-row>
        <my-row title="商家名称" :value="$format(orderDetail, 'bname', '')"></my-row>
        <my-row title="订单编号" :value="$format(orderDetail, 'ordersn', '')"></my-row>
        <my-row title="操作终端" :value="$format(orderDetail, 'terminal', '')"></my-row>
        <my-row title="房台号" :value="$format(orderDetail, 'roomid', '')"></my-row>
        <my-row title="订单金额">
          <view slot="value" class="value text-price">{{ $format(orderDetail, 'paymoney', '') }}</view>
        </my-row>
        <my-row title="订单时间" :value="$format(orderDetail, 'notifytime', '')"></my-row>
        <my-row title="备注">
          <view slot="value" class="value width-50 text-align-right">{{ $format(orderDetail, 'remark', '') }}</view>
        </my-row>

        <!-- <my-row title="是否退款" :value="orderDetail.refund | refundType"></my-row> -->
      </view>

      <view class="section-title">订单明细</view>
      <view class="detail-box">
        <view v-for="item in orderDetail.detail" :key="item.BeverageName" class="item fs-xs">
          <view class="column-1">{{ item.BeverageName }}</view>

          <view class="column-2 is-flex items-center">
            <span class="mr-4">x{{ $format(item, 'Quantity', '') }} </span>
            <tui-tag v-if="item.give" margin="0 0 0 4px" padding="4px 5px" size="20rpx" type="gold" plain>{{ item.give | giveType }}</tui-tag>
          </view>
          <span class="column-3 color-gold text-price">{{ $format(item, 'Price', '') }} </span>
        </view>
      </view>

      <view class="section-title">付款明细</view>
      <view class="box">
        <block v-for="(payItem, index) in orderDetail.paydetail" :key="index">
          <my-row :title="$format(payItem, 'title', '')">
            <view slot="value" class="value text-price">{{ $format(payItem, 'value', '') }}</view>
          </my-row>
        </block>
      </view>
    </section>

    <!-- 会员存酒 -->
    <section v-else-if="showType('keepwine')" class="card">
      <view class="box">
        <my-row title="订单类型" :value="$format(orderDetail, 'ordertype_bz', '')"></my-row>
        <my-row title="商家名称" :value="$format(orderDetail, 'bname', '')"></my-row>
        <my-row title="订单编号" :value="$format(orderDetail, 'ordernum', '')"></my-row>
        <my-row title="操作终端" :value="$format(orderDetail, 'terminal', '')"></my-row>
        <my-row title="房台号" :value="$format(orderDetail, 'roomid', '')"></my-row>

        <my-row title="存酒操作人" :value="$format(orderDetail, 'operator', '')"></my-row>
        <my-row title="订房人" :value="$format(orderDetail, 'booker', '')"></my-row>
        <my-row title="顾客昵称" :value="$format(orderDetail, 'guestname', '')"></my-row>
        <my-row title="手机号" :value="$format(orderDetail, 'telphone', '')"></my-row>
        <my-row title="存酒时间" :value="$utils.parseTime($format(orderDetail, 'addtime', ''))"></my-row>
        <my-row title="取酒时间" :value="$format(orderDetail, 'getwinetime', '')"></my-row>
        <my-row title="过期时间" :value="$format(orderDetail, 'endtime', '')"></my-row>
      </view>
      <view class="section-title">订单明细</view>
      <view class="box">
        <view v-for="item in orderDetail.detail" :key="item.id" class="item fs-xs">
          <my-row title="子单号" :value="$format(item, 'ordernum', '')"></my-row>
          <my-row title="酒水名称" :value="$format(item, 'goodsname', '')"></my-row>
          <my-row title="存酒单位" :value="$format(item, 'selectunit', '')"></my-row>
          <my-row title="取酒时间" :value="$format(item, 'gettime', '')"></my-row>
          <my-row title="过期时间" :value="$format(item, 'endtime', '')"></my-row>
          <!-- / ${item.Unit} -->
          <my-row title="数量" :value="$format(item, 'number', '')"></my-row>
        </view>
      </view>

      <view class="section-title">付款明细</view>
      <view v-if="$format(orderDetail, 'paydetail', []).length" class="box">
        <block v-for="(payItem, index) in $format(orderDetail, 'paydetail', [])" :key="index">
          <my-row :title="$format(payItem, 'title', '')">
            <view slot="value" class="value text-price">{{ $format(payItem, 'value', '') }}</view>
          </my-row>
        </block>
      </view>
      <view v-else class="py-10 px-15 fs-xs">
         暂无付款明细数据
      </view>
    </section>

    <section v-else class="container text-center">未知的订单类型</section>
  </view>
</template>

<script>
export default {
  data() {
    return {
      order: null, // 上一页传过来的订单数据
      orderDetail: null
    }
  },
  filters: {
    // 是否退款 ： 0否 / 1是
    refundType(val) {
      return val === 0 ? '否' : '已退款'
    },
    // 是否赠送 ： 0否 / 1是
    giveType(val) {
      return val === 0 ? '' : '赠送'
    }
  },
  onLoad(options) {
    const encodeOptions = this.$encode(options)
    this.order = this.$format(encodeOptions, 'data')
  },
  onShow() {
    this.initLoginInfo().then(res => {
      this.getOrderDetail()
    })
  },
  methods: {
    showType(ordertype) {
      const valOrderType = this.$format(this.orderDetail, 'ordertype')
      if (valOrderType == ordertype) return true
      return false
    },
    /**
     * 查询我的订单详情
     */
    getOrderDetail() {
      const id = this.$format(this.order, 'id')
      const ordertype = this.$format(this.order, 'ordertype')
      if (!id || !ordertype) return this.$msg('text', '缺少数据，查询失败')

      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return

      Object.assign(baseParam, { ordertype, id })
      console.param('查询我的订单详情', baseParam)
      this.$api
        .getOrderDetail(baseParam)
        .then(res => {
          console.res('查询我的订单详情', res)
          this.orderDetail = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('查询我的订单详情', err)
          this.errMsg(err, '请求订单详情失败')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.page {
  // padding: 15px;
  color: $color-base-white;
}

.card {
  // border-radius: 10px;
  background: $color-primary-modal-bg;
  overflow: hidden;
}

.box {
  // background: $color-primary-modal-bg;
  padding: 5px 0 5px 0;
  // border-bottom: 1px solid #202437;
  // margin-bottom: 10px;

  ::v-deep .row {
    padding: 10px 15px;
    .title {
      color: $color-primary-grey-text;
    }
    .value {
      color: #ffffff;
    }
  }
  .item {
    border-bottom: 10px solid $color-primary-bg;
    &:last-child {
      border-bottom: 0;
    }
  }
}

// 订单明细
.detail-box {
  background: $color-primary-modal-bg;
  // padding-bottom: 10px;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: $color-primary-modal-bg;
    .column-1 {
      width: 45%;
      text-align: left;
    }
    .column-2 {
      width: 30%;
      padding-left: 20px;
      text-align: left;
    }
    .column-3 {
      width: 25%;
      text-align: right;
    }
  }
  .item:nth-child(odd) {
    background: $color-primary-modal-bg;
  }
  .item:nth-child(even) {
    background: #292f45;
  }
}
</style>
